<?php
    if(!isset($meal_title) || !isset($meal_id)){
        $meal_title = "";
        $meal_id = -1;
    }
    
    if (!isset($meal_description)){
        $meal_description = "";
    }
?>
<h3><?=$meal_title?></h3>
<div id="meal_title_section" class="form_section">
    <div class="title">Meal Title: <span class="subtitle">(required)</span></div>
    <input type="text" name="meal_title" id="meal_title" class="input_field" value="<?=$meal_title?>"/>
    <input type="hidden" id="meal_id" value="<?=$meal_id?>">
    <div class="warning_section"></div>
</div>

<div id="category_section" class="form_section">
    <div class="title">Categories: <span class="subtitle">(required)</span></div>
    <select id="category_options">
        <option value="-1">- Select Category -</option>
        <?foreach($categories->result() as $cat):?>
        <option value="<?=$cat->category_id?>"><?=$cat->category_title?></option>
        <?endforeach;?>
    </select>
    <div id="category_list" class="listbox">
        <?if (isset($meal_categories)):?>
        <?foreach($meal_categories->result() as $result):?>
        <span class="listboxItem" value="<?=$result->category_id?>">
            <label class="listboxItemLabel"><?=$result->category_title?></label>
            <a href="#" onclick="listboxRemoveItem(this)" class="listboxItemClose"></a>
        </span>
        <?endforeach;?>
        <?endif;?>
    </div>
    <div class="warning_section"></div>
</div>

<div id="ingredient_section" class="form_section">
    <div class="title">Ingredients: <span class="subtitle">(required)</span></div>
    <input type="text" id="meal_ingredients" class="input_field" placeholder="Search for an ingredient"/>
    <div id="ingredient_list" class="listbox">
        <?if (isset($meal_ingredients)):?>
        <?foreach($meal_ingredients->result() as $result):?>
        <span class="listboxItem" value="<?=$result->ingredient_id?>">
            <label class="listboxItemLabel"><?=$result->ingredient_title?></label>
            <a onclick="listboxRemoveItem(this)" class="listboxItemClose"></a>
        </span>
        <?endforeach;?>
        <?endif;?>
    </div>
    <div class="warning_section"></div>
</div>

<div id="description_section" class="form_section">
<div class="title">Description: <span class="subtitle">(optional)</span></div>
<textarea id="meal_description"><?=$meal_description?></textarea>
<div class="warning_section"></div>
</div>

<div id="button_section" class="form_section">
    <input type="button" class="button" id="create_meal" value="Save Meal"/>
    <input type="button" class="button" id="cancel_button" value="Cancel Changes"/>
</div>

<a href="<?=base_url()?>meal_editing/edit_ingredients/createForm"
   data-fancybox-type="iframe" 
   class="button" style="display:none"
   id="create_button"></a>
